
@import "_sitemanage_variables";

// Membership namespace
.#{$namespace}sakai-membership {
  //SAK-29873
  .unpublishedLabel {
    opacity:0.2;
  }

  #membership {
    td[headers="checkbox"] {
      border: none;
    }
  }

  form#currentSitesForm th#checkbox {
      width: 2.5em;
  }

  // Override bootstrap bottom table margin; should probably be removed globally at some point
  table#currentSites, table#joinableSites, table#enrolments {
    margin-bottom: 0;
  }

  div.membershipContent {
    padding-top: $standard-spacing;
  }
}
// end Membership namespace

// Site Browser namespace
.#{$namespace}sakai-sitebrowser {
  div.searchResultsLabel {
    @include display-flex();
    margin: 0 auto $standard-spacing 0;
    font-size: 12px;
    color: var(--sakai-text-color-dimmed);

    a {
        margin-left: 4px;
    }
  }

  div.searchResultsLabel.bottom {
    margin: $standard-spacing auto 0 0;
  }

  h3.heading {
    margin: 0;
    padding: 0;
  }

  form.siteSearchForm {
    div.radio label {
      text-transform: capitalize;
      font-weight: bold;
      padding: 4px 0 4px 0;
    }

    div.radio.indnt3 {
      margin-top: $standard-spacing;
    }

    select#selectTerm {
      margin-left: 1em;
    }

    div.siteTitleSearch, div.act {
      padding-left: calc(#{$standard-spacing} * 2);

      input#searchbox {
        margin-left: 0.8em;
      }
    }
  }

  // Override bootstrap bottom table margin; should probably be removed globally at some point
  table#siteList {
    margin-bottom: 0;
  }
}
// end Site Browser namespace

// Site Info and Worksite Setup namespaces
.#{$namespace}sakai-siteinfo, .#{$namespace}sakai-sitesetup {
  #templateSettings {
    padding: .5em;
    background: var(--sakai-background-color-2);
    @include border-radius( 5px );
  }
  #siteTypeList {
    padding: .5em;
    background: var(--sakai-background-color-2);
    width: 100%;
    @include border-radius( 5px );
    p {
      border: none;
      padding: .1em 0;
      margin: 5px !important;
    }
  }
  #archiveSettings {
    padding: .5em;
    background: var(--sakai-background-color-2);
    width: 100%;
    @include border-radius( 5px );
  }
  #templateList {
    margin: 0 !important;
    padding: 0;
    list-style: none;
    li {
      background: var(--sakai-background-color-1);
      margin: 0 5px !important;
      padding: 10px 5px;
      height: 100%;
      overflow: hidden;
      border-bottom: 1px solid var(--sakai-border-color);
      &.siteTypeRow {
        padding: 2px 5px;
        background: var(--sakai-background-color-2);
        outline: none;
        margin: 5px 0 0 0 !important;
        border-bottom: none;
        h4 {
          margin: 0 !important;
          a {
            border: 1px solid var(--sakai-border-color);
            background: linear-gradient(to bottom, var(--sakai-background-color-3) 0,var(--sakai-background-color-4) 100%);
            text-decoration: none;
            padding: 5px;
            display: block;
            margin: 0;
            @include border-radius( 5px );
            text-transform: capitalize;
            em {
              font-style: normal;
            }
            .siteType {
              text-transform: capitalize;
              padding: 2px 8px;
              background: var(--sakai-background-color-1);
              @include border-radius( 3px );
            }
            &:hover {
              border: 1px solid var(--sakai-border-color);
              background: linear-gradient(to bottom, var(--sakai-background-color-4) 0,var(--sakai-background-color-3) 100%);
            }
            &.openDisc {
              border-bottom-right-radius: 0;
              border-bottom-left-radius: 0;
            }
          }
        }
        span.siteTypeRowBlurb {
          color:var(--sakai-text-color-dimmed);
          padding: 5px;
          font-size: 85%;
          text-transform: none;
        }
      }
      .templateName {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .templateDescription {
        overflow: hidden;
        text-overflow: ellipsis;
        p:first-child {
          margin: 0;
        }
      }
      &.selectedTemplate {
        background: var(--warnBanner-bgcolor);
      }
    }
  }
  #allTemplateSettings {
    margin: 15px 5px 0;
    height: 100%;
    overflow: hidden;
    background:var(--sakai-background-color-1);
    border: 1px solid var(--sakai-border-color);
  }
  .allTemplateSettingsHighlight {
    border: 1px solid var(--sakai-border-color) !important;
  }
  #templateSettingsTitleTermContainer {
    padding: 5px 8px;
    float: left;
  }
  #fromTemplateSettingsContainer {
    padding: 5px 8px;
    float: left;
  }
  .templateSettingsPlaceholder {
    float: none;
    clear: both;
    height: 100%;
    overflow: hidden;
  }
  #fromTemplateSettingsContainer_instruction_control {
    padding-left: 4em;
  }
  #fromTemplateSettingsContainer_instruction_body {
    position: absolute;
    background: var(--warnBanner-bgcolor);
    color: var(--warnBanner-color);
    border: 1px solid var(--warnBanner-bordercolor);
    padding: 3px;
    //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: var(--elevation-2dp);
    font-size: 90%;
    &:hover {
      cursor: pointer;
    }
    p {
      padding: 5px;
      margin: 0;
    }
  }
  #toolHolderW {
    margin-bottom: $standard-spacing;
    padding: 0;
    border: $manageTools-panel-border;
    @include border-radius( $manageTools-border-radius-size );
  }
  #toolSelectionList {
    margin: 0;
    line-height: 200%;
    border: $manageTools-panel-border;
    @include border-radius( $manageTools-border-radius-size );
    padding: 0;

    li {
      display: table-row;
      text-align: center;
      &:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
      }
      &:last-child {
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      span {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        i {
          position: absolute;
          left: $standard-spacing;
          margin-top: 5px;
          font-size: 1em;
          text-align: center;
        }
      }
      .selectedToolTitle {
        padding: $standard-spacing $standard-spacing $standard-spacing 35px;
        text-align: left;
      }
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
      width: 100%;
      display: table;
      border-collapse: collapse;
      li {
        line-height: 1.4;
        position: static;
        border-top: $manageTools-panel-border;
        &.highlightTool {
          background-color: var(--warnBanner-bgcolor);
          color: var(--warnBanner-color);
        }
        &:first-child {
          border-top: none;
        }
      }
    }
    #toolSelectionListHeader {
      display: table-header-group;
      border-top: 0 none;
      background-image: none;
    }
    h3 {
      display: table-cell;
      margin: 0;
      padding: $standard-spacing;
      &#toolSelectionListToolHeader {
        text-align: left;
      }
    }
  }
  #toolHolder {
    list-style: none;
    margin: 0;
    padding: 0;
    ul {
      list-style: none;
      margin: 0;
      padding: 0 $standard-spacing;
      display: none;
      > li {
        padding: $standard-spacing 0;
        border-top: $manageTools-panel-border;
        &:first-of-type {
          border-top: 0 none;
        }
        &.indnt3 {
          padding-top: 0;
          border-top: 0 none;		// no border on indented instance tools
        }
	    div {
          &.toolListDesc {
            padding: 0 0 0 20px;	// to align with tool name
          }
          &.toolListControl label {
              margin: 0;
          }
        }
      }
    }
    h3 {
        margin: 0;
        padding: 0;

      a {
        border-top: $manageTools-panel-border;
        border-bottom: $manageTools-panel-border;
        background: var(--sakai-background-color-2);
        text-decoration: none;
        text-transform: capitalize;
        padding: $standard-spacing;
        display: block;
        margin: 0;

        &:hover, &:hover .checkedCount, &:focus, &:focus .checkedCount {
          background: $manageTools-heading-hover-background;
          outline-offset: -#{$focus-outline-width};	// keep outline contained within the element
          color: var(--sakai-text-color-1);
        }
        &:before {
          content: "\25B8\0020\0020";
        }
        &.toggleNone {
          &:before {
            content: "";
          }
          &:hover, &:focus {
            border: 1px solid var(--sakai-border-color);
            background: linear-gradient(to bottom, var(--sakai-background-color-3) 0,var(--sakai-background-color-4) 100%);
            color: var(--sakai-text-color-2);
          }
        }
        &.open:before {
          content: "\25BE\0020\0020";
        }
      }
      &.communication a {
        @extend .sakai-colorize--sakai-color-blue;
      }
      &.assessment a {
        @extend .sakai-colorize--sakai-color-gold;
      }
      &.content a {
        @extend .sakai-colorize--sakai-color-red;
      }
      &.site_management a {
        @extend .sakai-colorize--sakai-color-orange;
      }
      &.miscellaneous a {
      }
    }
    .groupedTools {
      &:first-of-type a {
        border-top: 0 none;		// remove extra top border from first item
      }
      a:not(.open) {
        border-bottom: 0 none;	// remove the extra bottom border when the group isn't expanded
      }
    }
    .checkedCount {
      color: var(--sakai-text-color-1);
      display: block;
      float: right;
      min-width: 10px;
    }
    li:first-child ul {
      display: block;
    }
  }
  .selectAll {
    font-style: normal;
    margin-left: 10px;
    color: var(--link-color);
    font-weight: bold;
    text-decoration: none;
    font-size: 90%;
    text-transform: none;
    &:hover {
      cursor: pointer;
      color: var(--link-hover-color);
    }
  }
  #collExpContainer {
    text-align: right;
    a {
      font-style: normal;
      margin-left: 10px;
      color: var(--link-color);
      font-weight: bold;
      text-decoration: none;
      font-size: 90%;
      text-transform: none;
    }
  }
  .removeTool {
    text-decoration: none !important;
    color: var(--errorBanner-color);
  }
  #alertBox {
    background: var(--errorBanner-bgcolor);
    color: var(--errorBanner-color);
    white-space: nowrap;
    z-index: 100;

    span {
        padding: $standard-spacing 0;
    }
    a {
      color: var(--errorBanner-color);
      margin: 0 $standard-space;
    }
  }
  .multitool {
    padding-left: 30px !important;
  }
  #newSiteAlert {
    position: absolute;
    top: 25px;
    left: 30%;
    right: 30%;
    padding: 15px;
    border: 1px solid var(--warnBanner-bordercolor);
    background: var(--warnBanner-bgcolor);
    color: var(--warnBanner-color);
    @include border-radius( 3px );
    box-shadow: var(--elevation-4dp);
    vertical-align: middle;
    a.newSiteAlertClose {
      text-decoration: none;
      font-size: 120%;
      position: absolute;
      top: 5px;
      right: 5px;
    }
  }
  #toolSelectionListHeader {
    position: relative;
    background: var(--sakai-background-color-2);
  }
  #joinLimitByAccountType {
    margin-bottom: 1em;
  }
  .unpublishedLabel {
    opacity: 0.2;
  }
  #removeClass {
    max-width: 800px;
    #remove {
      width: 5%;
    }
  }
  th {
    &#term {
      width: 25%;
    }
    &#section {
      width: 50%;
    }
  }
  td {
    &.noWrap {
      white-space: nowrap;
    }
    &.grayText {
      color: var(--sakai-text-color-dimmed);
    }
  }
  #toolHolderWW {
    @include display-flex;
    .mathJaxToggleArea, .subPageNavToggleArea {
      @include display-flex;
      @include flex-direction(row-reverse);
      @include justify-content(flex-end);		// align to the left
      border: $manageTools-panel-border;
      @include border-radius( $manageTools-border-radius-size );
      padding: $standard-spacing;
      margin: $standard-spacing 0 0 0;
    }
  }
  .toggleAnchor:focus {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: -3px;
  }
  dl.defList {
    margin: 0;
    padding: 0;
    dt {
      padding: 5px 0;
    }
    dd {
      padding: 5px 0;
      padding: 5px 1em;
    }
  }
  .indnt3 .row {
    margin: $standard-spacing 0 0;
    &:first-child {
      margin-top: 0;
    }
  }
  #moreInfoHolder img {
    width: 100%;
  }
  #flashNotif .newSiteAlertActions {
    display: inline-block;
    margin: 0 $standard-spacing;
    a {
        @include sakai-secondary-button();
    }
  }
  input#btnSearch {
    margin-left: 0.7em;
  }
  h3.toolHeading {
    margin: 0;
    padding: 0;
  }
  p#messageHolder {
    width: 50%;
    padding: 0 0 0 2em;
    margin: 0;
  }
  label.onoffswitch-label {
    margin: 0 0 0 $standard-space; 		// space between label and checkbox
    font-weight: normal;
  }
  legend {
    font-size: 16px;
    padding-left: 0;

    &.nopad {
      padding: 0.5em 0;
    }
  }

  div.no-margin-top {
    margin-top: 0;
  }

  .siteinfo-tableHeading
  {
    @include justify-content(space-between);
    @include align-items(center);
    margin-bottom: 10px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 0.75em;

    a
    {
      margin: 0 0 0.5em 0;
    }

    h4
    {
      margin: 0 10px 0.5em 0;
    }
  }

  .siteinfo-tableFooter
  {
    @include justify-content(space-between);
    @include align-items(flex-end);
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    .act
    {
      padding: 0;
      margin-bottom: 10px;

      input
      {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }

  // Override bootstrap bottom table margin; should probably be removed globally at some point
  table#siteMembers, table#siteList {
    margin-bottom: 0;
  }

  div.participantsHeader {
    @include display-flex();
    @include flex-direction(column);
    @include align-items(flex-end);

    @media #{$tablet} {
      @include flex-wrap(wrap);
      @include flex-direction(row);
      @include align-items(center);
      @include justify-content(space-between);
      margin-bottom: calc(#{$standard-spacing} * 2);

      em {
        margin-right: $standard-spacing;
      }
    }

    @media #{$smallPhone} {
      @include flex-direction(column);
      @include align-items(center);

      em {
        margin-right: 0;  // Removing margin-right from previous breakpoint
      }
    }
  }

  .enrollment-status {
      font-size: $default-font-size-small;
  }

  i.icon-sakai--pdf {
    padding-left: 0.2em;
  }

  div.siteInfoContent, div.worksiteSetupContent {
    padding-top: $standard-spacing;
  }


  div.worksiteSetupContent div.sakai-table-viewFilter input[type=submit],
  div.worksiteSetupContent div.sakai-table-viewFilter button,
  div.worksiteSetupContent div.sakai-table-searchFilter input[type=submit]:last-of-type,
  div.worksiteSetupContent div.sakai-table-searchFilter button:last-of-type {
    margin-right: 0;
  }

  div.worksiteSetupContent {
    .sakai-table-toolBar .sakai-table-viewFilter ~ .sakai-table-searchFilter {
      margin-top: 0;
    }
  }

  @media #{$smallPhone} {
    div.sakai-table-viewFilter, div.sakai-table-searchFilter {
      @include flex-direction(row);	// override tables default
      @include align-items(center);	// override tables default
    }
  }

  .worksiteSetupViewAndTermFilterForm ~ .sakai-table-searchFilter {
    border-top: 1px solid var(--sakai-border-color);
    padding-top: $standard-spacing;
    margin-top: calc(#{$standard-spacing} - #{$standard-space});	// standard spacing minus the bottom marging space = padding from previous line
  }

  span.import-option-help {
    cursor: pointer;
  }

  div.siteimport-options {
    font-size: smaller;
  }

  .info-icon {
    background: none;
    border: none;
    padding: 0px 2px;
  }

  a.siteimport-method-link {
    font-weight: bold;
  }
  p.siteimport-method-info {
    margin-top: 8px;
  }

  #sitesAccordion {
    margin-top: 12px;
  }
}

#dropdownMenuButton {
  margin: 2px 0px 2px 4px;
  line-height: 18px;
}

td.disabled{
  color: var(--sakai-text-color-disabled);
}

.manageList {
  list-style: none;

  a{
    padding: 5px;
    text-decoration: none !important; /*important used to override active/hover/etc that happens on links */
  }

  li.list-group-item{
    border:none;

    &.disabled{
      background-color: var(--sakai-background-color-1);
    }
  }
}

.manageTable{
  thead{
    background-color: var(--sakai-background-color-2);
  }
  a{
    text-decoration: none !important;
  }
  td {

    &.buttonCol {
      width: 50px;
      text-align: center;
    }

    &.removeCol{
      width: 80px;
      text-align: center;
    }
  }
}

#printme.btn i {
  color: white;
}
